//#region 获取dom元素
const tbody = document.querySelector('tbody')
const updateForm = document.querySelector('.update-form')
const addForm = document.querySelector('.add-form')
const addBtn = document.querySelector('.add-btn')

const provinceUpdate = updateForm.querySelector('select[name="province"]')
const cityUpdate = updateForm.querySelector('select[name="city"]')
const countyUpdate = updateForm.querySelector('select[name="county"]')

const provinceAdd = addForm.querySelector('select[name="province"]')
const cityAdd = addForm.querySelector('select[name="city"]')
const countyAdd = addForm.querySelector('select[name="county"]')
//#endregion

getStudentList()

//#region 添加学员功能 
//省-市-县 下拉列表的显示


addForm.addEventListener('submit', function () {

})
//#endregion














//#region 学员数据渲染成表格
function getStudentList() {
  axios.get('/student/list').then(result => {
    const students = result.data.data
    let html = students.map(item => `
    <tr>
        <th scope="row">${item.id}</th>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex}</td>
        <td>${item.group}</td>
        <td>${item.phone}</td>
        <td>${item.salary}</td>
        <td>${item.truesalary}</td>
        <td>${item.province+item.city+item.county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm">修改</button>
          <button type="button" class="btn btn-danger btn-sm">删除</button>
        </td>
      </tr>
    `).join('')
    tbody.innerHTML = html
  })
}
//#endregion

//#region 渲染下拉列表选项
function renderOptions(data, dom) {
  let html;
  if (dom.name === 'province') {
    html = `<option value="">--省--</option>`
  } else if (dom.name === 'city') {
    html = `<option value="">--市--</option>`
  } else if (dom.name === 'county') {
    html = `<option value="">--县--</option>`
  }
  html += data.map(item => `<option value="${item}">${item}</option>`).join('')
  dom.innerHTML = html
}

function renderProvince(selectDom) {
  axios.get('/geo/province').then(result => {
    const provinces = result.data
    renderOptions(provinces, selectDom)
  })
}

function renderProvince(selectDom) {
  axios.get('/geo/city').then(result => {
    const provinces = result.data
    renderOptions(provinces, selectDom)
  })
}

function addFormCityInit() {
  renderProvince(provinceAdd)
  provinceAdd.addEventListener('change', function () { //省改变。 渲染城市

  })
}